import React, { Component } from 'react';
import {Row, Col, Form, Icon, Input, Button, message } from 'antd';
import Login_Logo from '../../images/kone_Logo.jpg'
import RESTClient from '../../api/client.js';
import './style.css';

const FormItem = Form.Item;
const $ = window.$;
class Login extends Component{
    constructor(props){
        super(props);
        this.state={

        }
    }
    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            new RESTClient().Login(values,function(data){
              if(data.ok){
                message.success("登录成功");
                $.cookie('username', values.username);
                window.location.hash="#/sence";
              }else{
                message.error("用户名或密码错误");
              }
            })
          }
        });
   }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div className="login-div">
                <Row style={{marginTop:'9%'}}>
                    <Col span={9}>
                    </Col>
                    <Col span={6}>
                        <Row>
                            <Col style={{textAlign:'center'}}>
                                <img src={Login_Logo} alt="login" style={{width:'40%'}}/>
                            </Col>
                        </Row>
                        <Row>
                            <Col style={{textAlign:'center',marginTop:'10%',marginBottom:'5%'}}>
                                登录开始您的浏览
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                            <Form onSubmit={(e)=>this.handleSubmit(e)}>
                                <FormItem>
                                  {getFieldDecorator('username', {
                                    rules: [{ required: true, message: 'Please input your username!' }],
                                  })(
                                    <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="请输入用户名" />
                                  )}
                                </FormItem>
                                <FormItem>
                                  {getFieldDecorator('password', {
                                    rules: [{ required: true, message: 'Please input your Password!' }],
                                  })(
                                    <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="请输入密码" />
                                  )}
                                </FormItem>
                                <FormItem>
                                  <Button type="primary" htmlType="submit">
                                    登陆
                                  </Button>
                                </FormItem>
                              </Form>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={9}>
                    </Col>
                </Row>
            </div>
        )
    }
}
Login = Form.create()(Login);
export default Login
